<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>SlickGrid Scrolling Benchmark</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8"/>
  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen"
        charset="utf-8"/>
  <link rel="stylesheet" href="../examples/examples.css" type="text/css" media="screen" charset="utf-8"/>
  <style>
    .cell-title {
      font-weight: bold;
    }

    .cell-effort-driven {
      text-align: center;
    }
  </style>
</head>
<body>
<script src="../lib/firebugx.js"></script>
<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery-ui-1.8.24.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>
<script src="../slick.formatters.js"></script>

<button onclick="grid.debug()">Debug info</button>
<button onclick="startBench(100)">Run (+= 100px)</button>
<button onclick="startBench(300)">Run (+= 300px)</button>
<button onclick="startBench(550)">Run (+= 550px; simulate paging)</button>
<button onclick="startBench(1000)">Run (+= 1'000px)</button>
<button onclick="startBench(5000)">Run (+= 5'000px)</button>
<hr/>

<div id="myGrid" style="width:600px;height:600px;"></div>

<script>
  var grid;
  var data = [];
  var extraColumns = 100;

  function testPostRender(cellNode, row, dataContext, colDef) {
    cellNode.style.backgroundColor = 'yellow';
  }

  var columns = [
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title"},
    {id: "duration", name: "Duration", field: "duration", selectable: false},
    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
    {id: "start", name: "Start", field: "start", minWidth: 60},
    {id: "finish", name: "Finish", field: "finish", minWidth: 60},
    {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, asyncPostRender: testPostRender}
  ];

  for (var i = 0; i < extraColumns; i++) {
    columns.push({id: "col" + i, name: "col" + i, field: "title"});
  }

  var options = {
    editable: false,
    enableAddRow: false,
    enableCellNavigation: true,
    enableAsyncPostRender: true,
    forceFitColumns: false
  };


  function generateRandomTask(index) {
    return {
      "id": "id_" + index,
      "title": "Task " + index,
      "duration": "5 days",
      "percentComplete": Math.round(Math.random() * 100),
      "start": "01/01/2014",
      "finish": "01/05/2014",
      "effortDriven": (index % 5 == 0)
    };
  }

  $(function () {
    data.getLength = function () {
      return 5000;
    };

    data.getItem = function (index) {
      // lazy-generate
      if (!data[index]) {
        data[index] = generateRandomTask(index);
      }
      return data[index];
    };

    data.getItemMetadata = function (row) {
      if (row % 2 === 1) {
        return {
          "columns": {
            "duration": {
              "colspan": 3
            }
          }
        };
      }
    };

    // initialize the grid
    grid = new Slick.Grid("#myGrid", data, columns, options);

    $grid = $("#myGrid div.grid-canvas").parent();
  });


  var $grid;
  var lastScrollTop = 0;
  var startTime;
  var scrollAmount = 1000;

  function queue(callback) {
    var raf = window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      window.webkitRequestAnimationFrame;
    if (raf) {
      raf(callback);
    } else {
      window.setTimeout(callback, 10);
    }
  }

  function startBench(scroll) {
    scrollAmount = scroll;
    lastScrollTop = 0;
    $grid.scrollTop(0);

    queue(function () {
      startTime = new Date();
      bench();
    });
  }

  function bench() {
    var scrollTop = $grid[0].scrollTop = lastScrollTop + scrollAmount;

    if ($grid[0].scrollTop == lastScrollTop + scrollAmount) {
      lastScrollTop = scrollTop;
      queue(bench);
    }
    else {
      alert((new Date() - startTime));
    }
  }
</script>
</body>
</html>
